﻿@model List<QLDV.Models.LOAICSD>

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/QLDV/_Index.cshtml";
}
    
<link rel="stylesheet" href="@Url.Content("~/Content/themes/jorgchart/css/jquery.jOrgChart.css")"/>
<link rel="stylesheet" href="@Url.Content("~/Content/themes/jorgchart/css/custom.css")"/>
<link href="@Url.Content("~/Content/themes/grayadmin/uiDialog/css/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
    
<script src="@Url.Content("~/Scripts/uiDialog/jquery.effects.core.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/uiDialog/jquery.effects.fade.js")" type="text/javascript"></script>
<script type="text/javascript" src="@Url.Content("~/Content/themes/jorgchart/prettify.js")"></script>
<script src="@Url.Content("~/Content/themes/jorgchart/jquery.jOrgChart.js")"> </script>
<script>
    function insertNewNode(orgNode, newNode) {
        $("#"+orgNode).append(newNode);
    }  
</script>

<div id="submenu">
    <div class="modules_left">
		<div class="module buttons">
			<a href="/LoaiCSD/Create" class="button" id ="createLoaiCSD" title=" Thêm loại Cơ sở đoàn"><small class ="icon plus"></small><span>Thêm loại Cơ sở Đoàn </span></a>
		</div>
        
	</div>
</div>

<div id="desc">
	<div class="body">	
        <div id="ajaxResult"></div>
        <div>
            <ul id ="org" style ="display:none"></ul>            
            @{
                int? LoaiCSD = 0;
                string name;
            }
            @foreach (var item in @Model)
            {
                if (item.CapBac == 0)
                {
                                <span id = @item.Id_LoaiCSD style ="display:none">@item.Ten</span>
                                <script>
                                    var id = @item.Id_LoaiCSD;
                        
                                    var newNode = "<li id =" + id + ">"+ "<a id= editLoaiCSD  href =/LoaiCSD/Edit/" + @item.Id_LoaiCSD + ">" + $("#"+id).text() + "</a>" + "</li>";
                                    $("#org").append(newNode);
                                </script>
                }
                else
                {
                    if (LoaiCSD != item.Id_LoaiCSDQL)
                    {
                        <span style = "display:none" id = @item.Id_LoaiCSD >@item.Ten</span>
                        <script>
                            var id = @item.Id_LoaiCSD;
                            var orgNode = @item.Id_LoaiCSDQL;
                            var name = $("#"+id).text();
                            var id_name = orgNode+ "_org";
                            var newNode = "<ul id=" + id_name +"><li id =" + id + ">"+ "<a id= editLoaiCSD  href =/LoaiCSD/Edit/" + id + ">" + name + "</a>" + "</li></ul>";
                            insertNewNode(orgNode, newNode);
                        </script>
                        LoaiCSD = item.Id_LoaiCSDQL;
                    }
                    else
                    {
                        <span style ="display:none" id = @item.Id_LoaiCSD>@item.Ten</span>
                        <script>
                            var id = @item.Id_LoaiCSD;
                            var orgNode = @item.Id_LoaiCSDQL +"_org";
                            var name = $("#"+id).text();
                            var id_name = id+ "_org";
                            var newNode = "<li id =" + id + ">"+ "<a id= editLoaiCSD href =/LoaiCSD/Edit/" + id + ">" + name + "</a>" + "</li>";
                            insertNewNode(orgNode, newNode);
                        </script>
                        LoaiCSD = item.Id_LoaiCSDQL;
            
                    }
                }
            }    
            <div id="chart" class="orgChart"></div>          
        </div>
    </div>
	<div class="clear"></div>
	<div id="body_footer">
		<div id="bottom_left"><div id="bottom_right">The bottom left/right rounded corner</div></div> 
	</div>
</div>
<script type="text/javascript">
    jQuery(document).ready(function () {
        $("#org").jOrgChart({
            chartElement: '#chart',
        });
        $('a.#createLoaiCSD').live("click", function(event) {addItem(this, event, '#bookInfo');});
        $('#editLoaiCSD').live("click", function(event) {loadDialog(this, event, '#bookInfo');});
    });
    
    function displayError(message, status)
    {
        var $dialog = $(message);
            $dialog
                .dialog({
			    modal: true,
                title: status + ' Error',
			    buttons: {
			    Ok: function() {
				    $(this).dialog( "close" );
			    }
		    }
	    }); 
        return false;             
    };
    function addItem(tag, event, target) {
        event.preventDefault();
        var $url = $(tag).attr('href');
        var $title = $(tag).attr('title');
        var $dialog = $('<div></div>');
        $dialog.empty();
        $dialog
            .load($url)
			.dialog({
			    autoOpen: true
				, title: $title
				, width: 500
                , modal: true
				, minHeight: 200
                , show: 'fade'
                , hide: 'fade'
			});

    };
    function loadDialog(tag, event, target) {
        event.preventDefault();
        var $loading = $('<img src="/Content/themes/grayadmin/images/ajaxLoader.gif" alt="loading" class="ui-loading-icon">');
        var $url = $(tag).attr('href');
        var $title = $(tag).attr('title');
        var $dialog = $('<div></div>');
        $dialog.empty();
        $dialog
            .append($loading)
            .load($url)
		    .dialog({
		        autoOpen: true
			    , title: $title
			    , width: 500
                , modal: true
			    , minHeight: 200
                , show: 'fade'
                , hide: 'fade'
		    });
        $dialog.dialog('open');
    };
</script>              
    
